import React, { useCallback, useMemo } from 'react'
import { Image, View } from '@tarojs/components'
import Images from '@ASSET/Images'
import { getNavBar, getPlatform } from '@UTILS/common'

import Taro from '@tarojs/taro'

import style from './HomeStep.module.scss'

interface Props {
  onClickFun: () => void
  onCloseFun: () => void
  showTriangle?:boolean
}

const HomeStep: React.FC<Props> = ({ onClickFun, onCloseFun, showTriangle }) => {
  const heightStyle = useMemo(() => getNavBar(), [])
  const containerStyle = useMemo(() => {
    const cusStyle = {
      top: heightStyle.navBarHeight
    }
    return cusStyle
  }, [heightStyle.navBarHeight])

  const triangleStyle = useMemo(() => {
    if (!getPlatform().isWX) {
      return {
        right: 56
      }
    }
    const { windowWidth } = Taro.getSystemInfoSync()
    const { right = 0, width = 87 } = Taro.getMenuButtonBoundingClientRect() || {}
    console.log(right, width, 123456)
    const resultStyle = {
      right: windowWidth - right + ((width * 63) / 87) - 7
    }
    return resultStyle
  }, [])
  const onClose = useCallback(() => {
    onCloseFun && onCloseFun()
  }, [onCloseFun])
  const onClick = useCallback(() => {
    onClickFun && onClickFun()
  }, [onClickFun])
  return (
    <View className={`${style.container} ${style.row}`} style={containerStyle}>
      <View className={style.delete} onClick={onClose}>
        <Image src={Images.home.homeStepClose} className={style.closeIcon} />
      </View>
      <View className={`${style.clickArea} ${style.row}`} onClick={onClick}>
        <View className={style.text}>点击“…”添加到我的小程序，使用更方便</View>
        <View className={style.arrow}>
          <Image src={Images.home.homeStepArraw} className={style.arrowIcon} />
        </View>
      </View>
      {showTriangle ? <View className={style.triangle} style={triangleStyle} /> : null}
    </View>
  )
}

export default HomeStep
